<template>
    <div>
        <div class="operation_left mb10">
                <a-input placeholder="请输入公司名称" style="width: 200px;margin-right:5px" v-model="formList.company_name" />
            <a-select allowClear class="mr5" style="width: 200px" v-model="formList.equipment_id" placeholder="设备名称">
                <a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
            </a-select>
            <a-select allowClear class="mr5" style="width: 200px" v-model="formList.pay_type" placeholder="支付方式">
                <a-select-option :value="1">微信支付</a-select-option>
                <a-select-option :value="2">线上支付</a-select-option>
            </a-select>
            <a-range-picker v-model="rangePickerVal" style="width: 220px" class="mr5" @change="onDateChange" :placeholder="['支付开始时间', '支付结束时间']"/>
            <a-button class="mr10" type="primary" @click="()=>{formList.page = 1;changeData()}">搜索</a-button>
            <a-button class="mr10" type="danger" @click="onBtnSearch(3)">重置</a-button>
        </div>
        <a-form layout="inline" class="mb10">
            <a-form-item>
                <a-button class="mr10 btn-error" type="primary" @click="onBtnSearch(0)">未结算</a-button>
                <a-button class="mr10" type="primary" @click="onBtnSearch(1)">已结算</a-button>
                <!-- <a-button class="mr10" type="primary" @click="onSearch">导出报表</a-button> -->
            </a-form-item>
            <!-- <a-form-item label="支付方式:" :label-col="{ md: 8,xs:12 }" :wrapper-col="{ md: 16,xs:12 }">
                <a-select style="width: 150px;" allowClear @change="onSelect" v-model="formList.pay_type" placeholder="请选择发票状态">
                    <a-select-option :value="1" :key="1">微信支付</a-select-option>
                    <a-select-option :value="2" :key="2">线下支付</a-select-option>
                </a-select>
            </a-form-item> -->
            <!-- <a-form-item label="单位名称:" :label-col="{ md: 8,xs:12 }" :wrapper-col="{ md: 16,xs:12 }">
        <a-input style="width: 180px;" placeholder="请输入单位名称" v-model="formList.logi_no" />
      </a-form-item> -->
            <a-form-item>

                <!-- <a-button class="ml10" type="primary" @click="onSearch">搜索</a-button> -->
            </a-form-item>
        </a-form>
        <div class="main">
            <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id" :scroll="{x: 1400, y: 500 }">
                <template slot="action" slot-scope="text, record">
                    <a-button v-if="(isAdmin || routerShow($route,'settlement_settlementStatus')) && record.settlement == 0" size="small" type="primary" @click="details(record)">对账结算</a-button>
                </template>
            </a-table>
            <div class="pageBox">
                <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page" :defaultCurrent="1" @change="pageChange" />
            </div>
        </div>
    </div>
</template>

<script>
import {
  mapState,
  mapActions,
} from 'vuex';
import Vue from 'vue';
import {
  USER,
} from '@/store/mutation-types';

export default {
  name: 'Record',
  data() {
    return {
      /* 通用模块 */
      // 列表
      state: 0, // 默认支付状态
      rangePickerVal: undefined,
      tableLoad: false, // 列表loading状态
      formList: {
        // 列表信息
        // pay_type: '',
        // settlement: '',

        page: 1,
      },
      selectedRowKeys: [], // 勾选的id
      /* 通用模块end */

      // 权限判断
      userData: {},
    };
  },
  computed: {
    ...mapState({
      Fields: state => state.paymentRecord.Fields,
      dataLists: state => state.paymentRecord.dataLists,
      requestCode: state => state.paymentRecord.requestCode,
      equipmentData: state => state.equipment.equipmentData,
    }),
    isAdmin() {
      if (this.userData.grade === 1 || this.userData.is_root === 1) {
        return true;
      }
      return false;
    },

  },
  mounted() {
    this.userData = Vue.ls.get(USER);
    this.equipmentAll();
    this.changeData();
  },
  methods: {
    // 日期
    onDateChange(date, dateStrings) {
      console.log(date, dateStrings);
      this.formList.created_start = dateStrings[0];
      this.formList.created_end = dateStrings[1];
      if (!date.length) {
        delete this.formList.created_start;
        delete this.formList.created_end;
      }
    },
    ...mapActions({
      getLists: 'paymentRecord/getLists', // 列表
      setTlementStatus: 'paymentRecord/setTlementStatus', // 订单状态结算
      equipmentAll: 'equipment/equipmentAll', // 所有设备名称
    }),
    /* 通用模块 */
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onBtnSearch(status) {
      if (status == 3) {
        this.rangePickerVal = undefined;
        this.formList = {
          page: 1,
        };
        this.changeData();
        return null;
      }
      console.log(status);
      this.formList.settlement = status;
      this.formList.page = 1;
      this.changeData();
    },
    onSelect(val) {
      console.log(val);
      this.formList.pay_type = val;
      this.formList.page = 1;
      delete this.formList.settlement;
      this.changeData();
    },
    onSearch() {
      //   this.formList.
      // this.changeData()
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists([this.formList, this.isAdmin]);
        this.tableLoad = false;
      }, 1000);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.changeData();
    },
    /* 通用模块end */
    /* 结算 */
    details(item) {
      console.log(item);
      const that = this;
      const fromItem = {
        oid: item.trade_no,
        status: 1,
      };
      this.$confirm({
        title: '您确定要结算该订单吗?',
        content: '请仔细核对该订单信息,在确认结算!',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          that.setTlementStatus(fromItem);
          that.changeData();
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.modalUl {
    font-size: 16px;

    li {
        margin-bottom: 10px;

        span {
            font-weight: bold;
            margin-right: 10px;
        }

        div {
            display: line;
            border: 1px solid #ccc;
        }
    }
}
</style>
